<template>
  <div class="ora-wrapper">
    <div class="container">
      <!-- 面包屑 -->
      <div class="ora-bread">
        <a href="javascript:;"> 首页 > </a>
        <a href="javascript:;"> {{ goodsInfo.gclass }} > </a>
        <span>{{ goodsInfo.name }}</span>
      </div>
      <!-- 商品信息 -->
      <div class="ora-product-info">
        <div class="left">
          <div class="pictrue">
            <div
              class="middle"
              ref="middle"
              @mouseenter="showLarge = true"
              @mouseleave="onMiddleLeave"
              @mousemove="onMiddleMove"
            >
              <img :src="currentImg" alt="" />
              <div
                class="layer"
                v-show="showLarge"
                :style="{
                  left: layerPos.x + 'px',
                  top: layerPos.y + 'px',
                  display: showLarge ? 'block' : 'none',
                }"
              ></div>
            </div>
            <div class="small">
              <ul>
                <li
                  v-for="(img, idx) in goodsInfo.imgList"
                  :key="idx"
                  :class="{ active: currentImg === img }"
                  @mouseover="changeImg(img)"
                >
                  <img :src="img" alt="" />
                </li>
              </ul>
            </div>
            <!-- 展示 -->
            <div
              class="large"
              v-show="showLarge"
              :style="{
                backgroundImage: 'url(' + currentImg + ')',
                backgroundPositionX: -2 * layerPos.x + 'px',
                backgroundPositionY: -2 * layerPos.y + 'px',
                display: showLarge ? 'block' : 'none',
              }"
              @mouseenter="showLarge = true"
              @mouseleave="onLargeLeave"
            ></div>
          </div>
          <div class="other">
            <ul>
              <li>
                <p>销量人气</p>
                <p>1999+</p>
                <p>正在热销</p>
              </li>
              <li>
                <p>商品评价</p>
                <p>999+</p>
                <p>多人好评</p>
              </li>
              <li>
                <p>剩余库存</p>
                <p>{{ goodsInfo.num }}</p>
                <p>急速发货</p>
              </li>
              <li>
                <p>商品分类</p>
                <p>{{goodsInfo.gclass}}</p>
                <p>更多相关</p>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <h3 class="name">{{ goodsInfo.title }}</h3>
          <p class="desc">热销商品/限时特惠/多人抢购/叠加优惠</p>
          <p class="price">
            <span class="now">¥{{ goodsInfo.price }}</span
            ><span class="old">¥{{ goodsInfo.uprice }}</span>
          </p>
          <div class="address">
            <div class="item">
              <div class="dt">促销</div>
              <div class="dd">好物放送，App领券购买直降120元</div>
            </div>
            <div class="item">
              <div class="dt">配送</div>
              <div class="dd">
                至
                <div class="box">
                  <span>江西农业大学 <i></i></span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="dt">服务</div>
              <div class="dd">
                <span class="fw">无忧退货</span>
                <span class="fw">快速退款</span>
                <span class="fw">免费包邮</span>
                <a href="#" class="lj">了解详情</a>
              </div>
            </div>
          </div>
          <div class="attrs">
            <div class="item">
              <div class="dt">数量</div>
              <div class="dd">
                <div class="num">
                  <a href="javascript:;" @click="goodnum--">-</a>
                  <input type="text" v-model="goodnum" />
                  <a href="javascript:;" @click="goodnum++">+</a>
                </div>
              </div>
            </div>
            <div class="item">
              <a class="buy"  @click="addToCart">加入购物车</a>&nbsp;&nbsp;
              <a class="buy" @click="addToOrder">立即购买</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      goodnum: 1,
      goodsInfo: {},
      username:'',
      currentImg: "",
      showLarge: false,
      layerPos: { x: 0, y: 0 },
      hideTimer: null,
    };
  },
  //获取商品数据 获取商品图片
  mounted() {
    if (this.$route.query.product) {
      this.goodsInfo = JSON.parse(this.$route.query.product);
      this.currentImg = this.goodsInfo.imgUrl;
    }
  },
  //从本地获取用户名 赋值给username
  created(){
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
    this.username = userInfo.username || ''
  },
  methods: {
    //更换图片
    changeImg(img) {
      this.currentImg = img;
    },
    //查看图片方法 鼠标进入
    onMiddleMove(e) {
      const middle = this.$refs.middle;
      const rect = middle.getBoundingClientRect();
      let x = e.clientX - rect.left;
      let y = e.clientY - rect.top;
      // 限定范围
      x = Math.max(0, Math.min(400, x));
      y = Math.max(0, Math.min(400, y));
      let mx = 0,
        my = 0;
      if (x <= 100) mx = 0;
      else if (x > 100 && x < 300) mx = x - 100;
      else if (x >= 300) mx = 200;
      if (y <= 100) my = 0;
      else if (y > 100 && y < 300) my = y - 100;
      else if (y >= 300) my = 200;
      this.layerPos = { x: mx, y: my };
    },
    // 鼠标离开方法
    onMiddleLeave() {
      // 延迟
      this.hideTimer = setTimeout(() => {
        // 将显示状态修改
        this.showLarge = false;
      }, 1000);
    },
    onLargeLeave() {
      this.showLarge = false;
      clearTimeout(this.hideTimer);
    },
    addToCart() {
      // 加入购物车的逻辑
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
      const username = userInfo.username || '';
      const goods = {
        ...this.goodsInfo,
        ordernum: String(this.goodnum || 1)
      };
      fetch('http://localhost:3000/addCartItem', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, goods })
      })
        .then(res => res.json())
        .then(data => {
          if (data.status === 200) {
            this.$message.success('加入购物车成功！');
          } else {
            this.$message.error(data.message || '加入购物车失败');
          }
        });
    },
    //购买商品
   addToOrder() {
    const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}');
    const username = userInfo.username || '';
    // 构造订单商品对象
    const goods = {
      ...this.goodsInfo,
      ordernum: String(this.goodnum || 1)
    };
    // 立即购买只买一个商品 传数组
    fetch('http://localhost:3000/addOrder', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, goods: [goods] })
    })
      .then(res => res.json())
      .then(data => {
        if (data.status === 200) {
          this.$message.success('下单成功！');
          // 跳转到订单页
          this.$router.push({ name: 'order' });
        } else {
          this.$message.error(data.message || '下单失败');
        }
      });
  },
  },
  
};
</script>

<style scoped>
/* 页面整体背景和容器 */
.ora-wrapper {
  background: #f5f5f5;
  line-height: 1.4;
}
.ora-wrapper .container {
  width: 1240px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

/* 面包屑 */
.ora-bread {
  padding: 10px 0 25px 25px;
}
.ora-bread a {
  color: #999;
  padding-right: 5px;
}
.ora-bread a:hover {
  color: #ffa500;
}

/* 商品信息主区域 */
.ora-product-info {
  background: #fff;
  display: flex;
  min-height: 580px;
}
.ora-product-info .left {
  width: 580px;
  padding: 30px 50px;
}

/* 商品主图区域 */
.ora-product-info .left .pictrue {
  width: 480px;
  height: 400px;
  display: flex;
  position: relative;
}
.ora-product-info .left .pictrue .middle {
  width: 400px;
  height: 400px;
  position: relative;
}
.ora-product-info .left .pictrue .middle img {
  width: 100%;
  height: 100%;
}
.ora-product-info .left .pictrue .middle .layer {
  width: 200px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
}

/* 放大镜大图 */
.ora-product-info .left .pictrue .large {
  width: 400px;
  height: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 412px;
  top: 0;
  z-index: 999;
  background-color: #fff;
  background-size: 800px 800px;
}

/* 缩略图 */
.ora-product-info .left .pictrue .small {
  width: 80px;
  height: 400px;
}
.ora-product-info .left .pictrue .small ul li {
  width: 68px;
  height: 68px;
  margin-bottom: 15px;
  margin-left: 12px;
  border: 2px solid transparent;
}
.ora-product-info .left .pictrue .small ul li img {
  width: 100%;
  height: 100%;
}
.ora-product-info .left .pictrue .small ul li.active,
.ora-product-info .left .pictrue .small ul li:hover {
  border-color: #ffa500;
}

/* 其他信息 */
.ora-product-info .left .other {
  margin-top: 20px;
}
.ora-product-info .left .other ul {
  display: flex;
  width: 400px;
}
.ora-product-info .left .other ul li {
  flex: 1;
  text-align: center;
  position: relative;
  line-height: 32px;
}
.ora-product-info .left .other ul li::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 0;
  height: 70px;
  border-right: 1px solid #e4e4e4;
}
.ora-product-info .left .other ul li:last-child::before {
  display: none;
}
.ora-product-info .left .other ul li p:first-child {
  color: #999;
}
.ora-product-info .left .other ul li p:nth-child(2) {
  color: #cf4444;
}

/* 右侧商品信息 */
.ora-product-info .right {
  width: 660px;
  padding-top: 30px;
}
.ora-product-info .right h3 {
  font-size: 22px;
  font-weight: normal;
}
.ora-product-info .right .desc {
  padding-top: 10px;
  color: #999;
}
.ora-product-info .right .price {
  padding: 10px 0;
}
.ora-product-info .right .price .now {
  color: #cf4444;
  margin-right: 5px;
  font-size: 22px;
}
.ora-product-info .right .price .old {
  color: #999;
  text-decoration: line-through;
  font-size: 18px;
}

/* 地址、服务等 */
.ora-product-info .right .address {
  width: 510px;
  background: #f9f9f9;
  padding: 0 10px 20px;
}
.ora-product-info .right .address .fw {
  position: relative;
  padding: 0 15px 0 10px;
}
.ora-product-info .right .address .fw::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffa500;
}
.ora-product-info .right .address .lj {
  color: #ffa500;
}
.ora-product-info .right .address .box {
  width: 150px;
  height: 28px;
  border: 1px solid #e4e4e4;
  display: inline-block;
  line-height: 26px;
  text-align: center;
  margin-left: 10px;
  background: #fff;
}

/* 数量选择和按钮 */
.ora-product-info .right .attrs {
  padding: 0 10px;
}
.ora-product-info .right .attrs .num {
  width: 116px;
  height: 28px;
  border: 1px solid #e4e4e4;
  display: flex;
}
.ora-product-info .right .attrs .num input {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  width: 60px;
  line-height: 26px;
  text-align: center;
  color: #979797;
}
.ora-product-info .right .attrs .num a {
  width: 28px;
  text-align: center;
  line-height: 26px;
  color: #979797;
}
.ora-product-info .right .item {
  color: #999;
  display: flex;
  padding-top: 20px;
  align-items: center;
}
.ora-product-info .right .item .dt {
  width: 50px;
}
.ora-product-info .right .item .dd {
  flex: 1;
  color: #666;
}
.ora-product-info .right .buy {
  width: 220px;
  height: 50px;
  background: #ffa500;
  border-radius: 4px;
  display: block;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #ffa500;
  cursor: pointer;
}
.ora-product-info .right .buy:hover{
  background: #fff;
  color: #ffa500;
}
</style>

